<script setup lang="ts">
import type { FormRules } from "element-plus"
import type { LoginRequestData } from "./apis/type"
// import { Key, Loading, Lock, Picture, User } from "@element-plus/icons-vue"
import { useSettingsStore } from "@/pinia/stores/settings"
import { useUserStore } from "@/pinia/stores/user"
import { loginApi } from "./apis"
import { useFocus } from "./composables/useFocus"

const router = useRouter()

const userStore = useUserStore()

const settingsStore = useSettingsStore()

const { isFocus, handleBlur, handleFocus } = useFocus()

// 登录协议对话框
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)

const checked = ref(true)
/** 登录表单元素的引用 */
const loginFormRef = useTemplateRef("loginFormRef")

/** 登录按钮 Loading */
const loading = ref(false)

/** 登录表单数据 */
const loginFormData: LoginRequestData = reactive({
  username: "",
  account: "",
  password: "",
  mobile: "",
  code: ""
})

/** 登录表单校验规则 */
const loginFormRules: FormRules = {
  account: [
    { required: true, message: "请输入用户名/账号", trigger: "blur" },
    { min: 11, max: 11, message: "请输入长度在11个手机号码", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "请输入长度在 6 到 16 个密码字符", trigger: "blur" }
  ],
  code: [
  ]
}
function handleWechatLogin () {
  // 跳转到 wechatlogin
  router.push("/wechatlogin")
}

/** 登录 */
function handleLogin() {
  if (!checked.value) {
    ElMessage.error({
      message: "登录前，请先同意服务条款和隐私条款！",
      type: "warning",
      duration: 1000
    })
    return false
  }
  loginFormRef.value?.validate((valid) => {
    if (!valid) {
      return
    }
    loginFormData.username = loginFormData.account
    loginFormData.mobile = loginFormData.account
    loading.value = true
    loginApi(loginFormData).then(({ data }) => {
      userStore.setUsername(loginFormData.account) // token-admin
      userStore.setToken(data.token) // token-admin
      userStore.setUserId(data.id) // token-admin
      router.push("/")
    }).catch(() => {
      ElMessage.error({
        message: "验证失败，消息将在 2 秒后关闭",
        type: "warning",
        duration: 2000
      })
      // loginFormData.password = ""
    }).finally(() => {
      loading.value = false
    })
  })
}
function showAgree(id) {
  if (id == 1) {
    dialogVisible.value = true
  } else {
    dialogVisible2.value = true
  }
}
</script>

<template>
  <div class="login-container"  >
    <div class="content">
      <div class="tab-nav">
        <div class="tab-item current">
          密码登录
        </div>
        <!-- <a href="/#/login3" class="">
          <div class="tab-item">
            短信登录
          </div></a>-->
        <a href="/#/codeLogin" class="">
          <div class="tab-item">
            短信登录
          </div>
        </a>
      </div>
      <el-form ref="loginFormRef" :model="loginFormData" :rules="loginFormRules" @keyup.enter="handleLogin">
        <div class="form-content">
          <el-form-item prop="account">
            <div class="form-item">
              <label for="id1" class="accout" />
              <input id="id1" v-model.trim="loginFormData.account" type="text" placeholder="请输入手机号码">
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <div class="form-item">
              <label for="id3" class="password" />
              <input id="id3" type="password" v-model.trim="loginFormData.password" placeholder="请输入密码">
            </div>
          </el-form-item>
          <div class="agree">
              <div style="display: flex;flex-direction: row;">
                <input class="el-checkbox__original" v-model="checked" type="checkbox" aria-hidden="false" />
                <div style="margin-left: 5px;">我已阅读并同意</div>
                <div @click="showAgree(1)">《服务条款》</div>
                <div @click="showAgree(2)">《隐私条款》</div>
              </div>
          </div>
          <!-- <div class="agree" style="margin-top: 20px;">
            <label class="el-checkbox">
              <span class="el-checkbox__input">
                <input class="el-checkbox__original" type="checkbox" aria-hidden="false" value="记住密码">
                <span class="el-checkbox__inner" /></span>
              <span class="el-checkbox__label">记住密码</span>
            </label>
          </div> -->
          <button type="button" class="submit" @click.prevent="handleLogin">
            登录
          </button>
          <div class="tip">
            <div class="hasAccout">
              <span>还没有账号？</span>
              <a href="/#/register"><span class="goLogin"> 立即注册 </span></a>
              <a href="/#/forget"><span class="goForget"> 忘记密码 </span></a>
            </div>
            <div class="forget">
              <a href="/#/" class=""><span class="goForget">返回首页</span></a>
            </div>
          </div>
          <div class="tip2">
            <div class="css-jr78vv">
              <div class="css-1vli2z"></div>
              <div class="css-wna3id">其他方式登录</div>
              <div class="css-1vli2z"></div>
            </div>
            <div class="Login-socialLogin">
              <span class="Login-socialButtonGroup">
              <button type="button" @click="handleWechatLogin" class="Button Login-socialButton  Button--plain  ">
                <svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="ZDI ZDI--Wechat24">
                  <path fill="#07C160" d="M20.314 18.59c1.333-.968 2.186-2.397 2.186-3.986 0-2.91-2.833-5.27-6.325-5.27-3.494 0-6.325 2.36-6.325 5.27 0 2.911 2.831 5.271 6.325 5.271.698.001 1.393-.096 2.064-.288l.186-.029c.122 0 .232.038.336.097l1.386.8.12.04a.21.21 0 0 0 .212-.211l-.034-.154-.285-1.063-.023-.135a.42.42 0 0 1 .177-.343ZM9.09 3.513C4.9 3.514 1.5 6.346 1.5 9.84c0 1.905 1.022 3.622 2.622 4.781a.505.505 0 0 1 .213.412l-.026.16-.343 1.276-.04.185c0 .14.113.254.252.254l.146-.047 1.663-.96a.793.793 0 0 1 .403-.116l.222.032c.806.231 1.64.348 2.478.348l.417-.01a4.888 4.888 0 0 1-.255-1.55c0-3.186 3.1-5.77 6.923-5.77l.411.011c-.57-3.02-3.71-5.332-7.494-5.332Zm4.976 10.248a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001Zm4.217 0a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001ZM6.561 8.827a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Zm5.061 0a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Z" clip-rule="evenodd"></path></svg>
              </button>
              </span>
            </div>
          </div>
        </div>
      </el-form>
      <el-dialog v-model="dialogVisible" title="服务条款" width="500px">
        <div class="el-dialog__body">
          <div class="el-dialog__message">
            <p>
              1. 登录即代表同意本服务条款。
            </p>
            <p>
              2. 登录即代表同意本隐私条款。
            </p>
            <p>
              3. 登录即代表同意本用户协议。
            </p>
          </div>
        </div>
      </el-dialog>
      <el-dialog v-model="dialogVisible2" title="隐私条款" width="500px">
        <div class="el-dialog__body">
          <div class="el-dialog__message">
            <p>
              1. 登录即代表同意本隐私条款。
            </p>
            <p>
              2. 登录即代表同意本隐私条款。
            </p>
            <p>
              3. 登录即代表同意本用户协议。
            </p>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<style>
.login-container {
  width: 100%;
  height: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content {
  width: 736px;
  height: 688px;
  background: #ffffff;
  border-radius: 30px;
  overflow: hidden;
}
.tab-nav {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

.form-item {
  width: 480px;
  height: 60px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  margin: 0 auto 40px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  box-sizing: border-box;
  position: relative;
}

.agree {
  width: 410px;
  height: 20px;
  margin: 0 auto;
  cursor: pointer;
  font-size: 18px;
  color: #333;
}
.tip {
  width: 410px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.tip2 {
  width: 410px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.current {
  color: #45a1ff;
  margin-right: 100px;
}

.submit {
  display: block;
  width: 410px;
  height: 60px;
  line-height: 60px;
  background: #45a1ff;
  border-radius: 5px;
  font-size: 22px;
  color: #fff;
  letter-spacing: 20px;
  text-align: center;
  border: none;
  margin: 30px auto 10px;
  cursor: pointer;
}
.accout {
  display: block;
  width: 17px;
  height: 25px;
  background: url() no-repeat center center / 100%;
}
.form-item input {
  height: 25px;
  width: 400px;
  margin-left: 22px;
  border: none;
  background-color: transparent;
  padding-left: 20px;
  border-left: 1px solid rgba(0, 0, 0, .3);
  box-sizing: border-box;
  outline: none;
}
.password {
  display: block;
  width: 20px;
  height: 25px;
  background: url() no-repeat center center / 100%;
}
.tab-item {
  color: #333;
  font-size: 28px;
  line-height: 37px;
  text-align: center;
  cursor: pointer;
}
.tab-nav {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}
.current {
  color: #45a1ff;
  margin-right: 100px;
}
.form-content {
  margin-top: 60px;
}
.tip .goLogin {
  color: #45a1ff;
}
.tip .goForget {
  color: #45a1ff;
}
.hasAccout {
  width: 300px;
}
.forget .forget-text {
  font-size: 18px;
  color: #333;
  line-height: 24px;
}
.el-checkbox__label {
  display: inline-block;
  padding-left: 8px;
  line-height: 1;
  font-size: var(--el-checkbox-font-size);
}
.agree {
  width: 410px;
  height: 20px;
  margin: 0 auto;
  cursor: pointer;
  font-size: 18px;
  color: #333;
}
.el-form-item__error {
  padding-left: 190px;
  top: 70px;
  font-size: 14px;
}
.form-item {
  margin: 0 auto 14px;
}
.el-form-item {
  margin-bottom: 20px;
}
.Login-socialButtonGroup, .Login-socialLogin
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}
.Login-socialButtonGroup {
  margin: auto;
  transition: opacity .3s ease;
  width: 204px;
}
.Login-socialButton {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
  border: 0;
}
.css-1vli2z {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  border-top: 1px solid;
  border-color: #ebeced;
  width: 124px;
}
.css-jr78vv {
  box-sizing: border-box;
  min-width: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 24px 24px 12px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.css-wna3id {
  box-sizing: border-box;
  min-width: 0;
  color: #9196a1;
  font-size: 12px;
  margin-left: 16px;
  margin-right: 16px;
  width: 72px;
  overflow: hidden;
  line-height: 17px;
  white-space: nowrap;
}
</style>
